<template>
  <div class="box">
    <!--note-->
    <h2 style="text-align: center; font-family: bold">Notes</h2>
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin: 0 auto; width: 90%; text-align: center; padding-top: 20px"
    >
      <el-form-item label="年级:" style="padding-right: 50px">
        <el-select v-model="gradeChoosing" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.grade"
            :label="item.grade"
            :value="item.grade"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级:" style="padding-right: 50px">
        <el-select v-model="classChoosing" placeholder="请选择">
          <el-option
            v-for="item in Option.classes"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="年份:">
        <el-select v-model="yearChoosing" placeholder="请选择">
          <el-option
            v-for="item in Option.years"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="Search">查询</el-button>
      </el-form-item>
    </el-form>

    <div>
      <el-input
        :autosize="{ minRows: 20 }"
        type="textarea"
        class="area"
        placeholder="无内容"
        v-model="areaContent"
        :readonly="true"
      ></el-input>
    </div>
  </div>
</template>

<style scoped>
.box {
  margin: 0 auto;
  padding: 20px;
}

.area {
  width: 75%;
  height: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

.el-textarea.is-disabled /deep/ .el-textarea__inner {
  color: rgba(0, 0, 0, 0.822);
  background-color: #f5f7fa;
  border-color: #dfe4ed;
  cursor: not-allowed;
}
</style>

<script>
import { getGradeClassesYears } from '@/api/gradeClassesYears'
import { getNote } from '@/api/part4/note'
export default {
  data() {
    return {
      options: [],
      gradeChoosing: 2017,
      Option: {
        grade: 2017,
        classes: [],
        years: []
      },
      classChoosing: '软件工程1班',
      yearChoosing: 2021,
      activeName: 'first',
      areaContent: ''
    }
  },
  created: function () {

  },
  mounted: function () {
    // 获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options;
      //初始化grade选项
      this.gradeChoosing = this.options[0].grade;
      let grade=this.gradeChoosing;
      this.Option = this.options.find(function (x) { return x.grade === grade; });
      this.classChoosing = this.Option.classes[0];
      this.yearChoosing = this.Option.years[0];

      //获取数据
      this.Search();
    }).catch(response => {
      console.log(response)
    })

  },
  watch: {
    gradeChoosing: function (val) {
      this.Option = this.options.find(function (x) { return x.grade === val; });
      this.classChoosing = this.Option.classes[0];
      this.yearChoosing = this.Option.years[0];
    }
  },
  methods: {
    Search() {//查询一个班级对应各年份的数据
      let user = this.gradeChoosing + "级" + this.classChoosing + "团支部";
      let data = { user: user, year: this.yearChoosing };
      getNote(data).then(response => {
        this.areaContent = response.data.content;
        console.log(response);
      }).catch(err => {
        console.log(err);
      })
    },
  }
}
</script>
